<template>
  <div class="cashiering-container box">
    <div class="container-table">
      <el-row>
        <el-col :span="18">
          <el-input
            :disabled="!checked"
            v-model="goodsCode"
            @keyup.enter="getGoodsByCode"
            placeholder="请扫描商品条码"
            size="large"
            style="width: 15rem"
          ></el-input>
          <el-button size="large" @click="getGoodsByCode">查询</el-button>
          <el-checkbox v-model="checked">手动输入条码</el-checkbox>
        </el-col>
        <el-col :span="18">
          <div class="msg">
            <span>收银员:{{ staff.staff_name }}</span
            ><span>日期:{{ now }}</span>
          </div>
          <el-table :data="goodsList" border style="width: 100%; height: 20rem">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="goods_name" label="商品名称" />
            <el-table-column prop="goods_price" label="单价" />
            <el-table-column prop="goods_count" label="数量">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.goods_count"
                  size="small"
                  :min="1"
                  controls-position="right"
                />
              </template>
            </el-table-column>
            <el-table-column prop="goods_money" label="金额">
              <template #default="scope">
                {{ (scope.row.goods_count * scope.row.goods_price).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <span class="total">总计:{{ totalMoney.toFixed(2) }}</span>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="changeDialogTableVisible"
            >结账</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="结账信息">
    <el-row>
      <el-col :span="18">
        <div class="msg">
          <span>收银员:{{ staff.staff_name }}</span
          ><span>日期:{{ dayjs().format('YYYY/MM/DD HH:mm:ss') }}</span>
        </div>
        <div class="table">
          <el-table :data="goodsList" style="width: 95%">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="goods_name" label="商品名称" />
            <el-table-column prop="goods_price" label="单价" />
            <el-table-column prop="goods_count" label="数量" />
            <el-table-column prop="goods_money" label="金额">
              <template #default="scope">
                {{ (scope.row.goods_count * scope.row.goods_price).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <span class="total">总计:{{ totalMoney.toFixed(2) }}</span>
        </div>
        <div class="msg bottom">
          <span>*部分商品享受3.8节特惠活动</span>
          <span>优惠 5.60</span>
        </div>
      </el-col>
      <el-col :span="6" class="right">
        <div>
          实收: <el-input style="width: 5rem" v-model="money"></el-input>
        </div>
        <div>
          找零:
          <span>{{
            money - totalMoney >= 0 ? (money - totalMoney).toFixed(2) : 0
          }}</span>
        </div>
        <div>
          <el-button type="primary" @click="submit">确定收银</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { reqGetGoodsByCode } from '@/api/goods'
import { reqInsertSaleList } from '@/api/sale'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
const sotre = useStore()
const { getters } = sotre
const checked = ref(true)
// 显示收银详情
const dialogTableVisible = ref(false)
const changeDialogTableVisible = () => {
  dialogTableVisible.value = !dialogTableVisible.value
}
// 收银员
const staff = computed(() => getters.staffLogin)
// 当前时间
const now = ref(dayjs().format('YYYY/MM/DD HH:mm:ss'))
setInterval(() => {
  now.value = dayjs().format('YYYY/MM/DD HH:mm:ss')
}, 1000)
const goodsList = reactive([])
// 通过条码获取商品信息
const goodsCode = ref('')
const getGoodsByCode = async () => {
  if (goodsCode.value !== '') {
    const result = await reqGetGoodsByCode({ code: goodsCode.value })
    if (result.code === 200) {
      ElMessage({
        message: result.msg,
        type: 'success'
      })
      const { data } = result
      const goods = {
        goods_id: data.goods_id,
        goods_name: data.goods_name,
        goods_price: data.goods_price.toFixed(2),
        goods_count: 1,
        goods_money: data.goods_price * 1
      }
      checkCode(goods)
    } else {
      ElMessage({
        message: result.msg,
        type: 'warning'
      })
    }
    goodsCode.value = ''
  } else {
    ElMessage({
      message: '请输入商品条码!',
      type: 'warning'
    })
  }
}
// 检查输入重复
const checkCode = (goods) => {
  if (goodsList.length !== 0) {
    let flag = null
    goodsList.forEach((e) => {
      if (goods.goods_id === e.goods_id) {
        flag = e
        return null
      }
    })
    if (flag) {
      flag.goods_count += 1
    } else {
      goodsList.push(goods)
    }
  } else {
    goodsList.push(goods)
  }
}
// 确定收银
const submit = async () => {
  const subArr = []
  goodsList.forEach((e) => {
    const obj = {
      sale_time: dayjs(now.value).valueOf(),
      sale_count: e.goods_count,
      sale_money: e.goods_money,
      staff_number: staff.value.staff_number,
      goods_id: e.goods_id
    }
    subArr.push(obj)
  })
  const result = await reqInsertSaleList(subArr)
  if (result.code === 200) {
    ElMessage({
      message: result.msg,
      type: 'success'
    })
    goodsList.length = 0
  } else {
    ElMessage({
      message: result.msg,
      type: 'warning'
    })
  }
}
// 总计
const totalMoney = ref(0)
watch(goodsList, (newValue, oldValue) => {
  totalMoney.value = 0
  newValue.forEach((e) => {
    totalMoney.value += e.goods_count * e.goods_price
  })
})
// 实收
const money = ref(0)
</script>

<style lang="scss" scoped>
.cashiering-container {
  height: 38rem;
  .el-col:first-child {
    position: relative;
    padding: 1rem 10rem;
    .el-button {
      margin-left: 1rem;
    }
    .el-checkbox {
      margin-left: 1rem;
    }
  }
  .el-col:nth-child(2) {
    // margin-top: 2rem;
    position: relative;
    padding-left: 10rem;
    .msg {
      &:last-child() {
        width: 5.5rem;
      }
    }
    .total {
      position: absolute;
      right: 1rem;
      top: 25rem;
      width: 10rem;
    }
  }
  .el-col:last-child {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    .el-button {
      width: 10rem;
    }
  }
}
.table {
  position: relative;
  :deep(.el-table__inner-wrapper::before) {
    border-top: 1px dashed;
  }
  :deep(.el-table__body-wrapper) {
    margin-bottom: 30px;
  }
  :deep(.el-table td.el-table__cell) {
    border-bottom: none;
  }
  .total {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 8rem;
  }
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  & > div {
    font-size: 20px;
    .el-button {
      width: 10rem;
    }
  }
}
.msg {
  padding: 0 2rem;
  display: flex;
  height: 2rem;
  justify-content: space-between;
}
.bottom {
  margin-top: 10px;
}
</style>
